<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自适应布局</title>
    <style>
        html *{
            margin: 0;
            padding: 0;
        }

        .parent{

            display: flex;

            flex-wrap: wrap;

            justify-content: center;

        }
        .son{

            flex: 0 1 300px;
            background-color: #fdf6e3;
            min-height: 200px;
            box-sizing: border-box;
            border: 3px solid #9DB783;
            padding: 20px;
            margin: 20px;

        }

        .title{
            font-size: 20px;
            color: #c03035;

        }

        .content{

            font-size: 15px;
            color: #323232;

        }

    </style>


</head>
<body>
    <section class="parent">

        <article class="son">
            <span class="title">将进酒</span> <br> <span class="content">君不见, <br>黄河之水天上来, 奔流到海不复回, <br>君不见,<br> 高堂明镜悲白发, 朝如青丝暮成雪</span>
        </article>
        <article class="son">
            <span class="title">丹歌惊鸿</span> <br> <span class="content">天地匆匆 惊鸿而过 路有千百个<br>遑遑无归 闲云逸鹤 人间红尘过<br>引势而流 鸿门乱局 各有各选择<br>乾震坎艮 坤巽离兑 定一切生克</span>
        </article>
        <article class="son">
            <span class="title">将进酒</span> <br> <span class="content">君不见, <br>黄河之水天上来, 奔流到海不复回, <br>君不见,<br> 高堂明镜悲白发, 朝如青丝暮成雪</span>
        </article>
        <article class="son">
            <span class="title">丹歌惊鸿</span> <br> <span class="content">天地匆匆 惊鸿而过 路有千百个<br>遑遑无归 闲云逸鹤 人间红尘过<br>引势而流 鸿门乱局 各有各选择<br>乾震坎艮 坤巽离兑 定一切生克</span>
        </article>
        <article class="son">
            <span class="title">将进酒</span> <br> <span class="content">君不见, <br>黄河之水天上来, 奔流到海不复回, <br>君不见,<br> 高堂明镜悲白发, 朝如青丝暮成雪</span>
        </article>
        <article class="son">
            <span class="title">丹歌惊鸿</span> <br> <span class="content">天地匆匆 惊鸿而过 路有千百个<br>遑遑无归 闲云逸鹤 人间红尘过<br>引势而流 鸿门乱局 各有各选择<br>乾震坎艮 坤巽离兑 定一切生克</span>
        </article>
        <article class="son">
            <span class="title">将进酒</span> <br> <span class="content">君不见, <br>黄河之水天上来, 奔流到海不复回, <br>君不见,<br> 高堂明镜悲白发, 朝如青丝暮成雪</span>
        </article>
        <article class="son">
            <span class="title">丹歌惊鸿</span> <br> <span class="content">天地匆匆 惊鸿而过 路有千百个<br>遑遑无归 闲云逸鹤 人间红尘过<br>引势而流 鸿门乱局 各有各选择<br>乾震坎艮 坤巽离兑 定一切生克</span>
        </article>
        <article class="son">
            <span class="title">将进酒</span> <br> <span class="content">君不见, <br>黄河之水天上来, 奔流到海不复回, <br>君不见,<br> 高堂明镜悲白发, 朝如青丝暮成雪</span>
        </article>
        <article class="son">
            <span class="title">丹歌惊鸿</span> <br> <span class="content">天地匆匆 惊鸿而过 路有千百个<br>遑遑无归 闲云逸鹤 人间红尘过<br>引势而流 鸿门乱局 各有各选择<br>乾震坎艮 坤巽离兑 定一切生克</span>
        </article>
    </section>

</body>
</html>